<template>
    <div class="body jinli TimePicker" v-if="JSON.stringify(Info) != '{}'">
        <div class="list_height plist-txt notarrow">
            <div class="pic"></div>
            <div class="tit font14">
                <span class="font_red_light">*</span> 面试人
            </div>
            <div class="describe font13">
                <input
                    type="text"
                    id="resume_name"
                    readonly="true"
                    value=""
                    v-model="Info.apply.resume_name"
                />
            </div>
            <div class="arrow"></div>
            <div class="clear"></div>
        </div>
        <div class="imSelectParent">
            <div
                class="list_height plist-txt imitateSelect"
                @click="gengduoKey = !gengduoKey"
            >
                <div class="pic"></div>
                <div class="tit font14">
                    <span class="font_red_light">*</span> 面试职位
                </div>
                <div class="describe font13">
                    <span class="selectTxt">{{
                        Info.default_jobs.jobs_name
                    }}</span>
                </div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="list_height plist-txt" @click="beginKey = !beginKey">
            <div class="pic"></div>
            <div class="tit font14">
                <span class="font_red_light">*</span> 面试日期
            </div>
            <div class="describe font13">
                <input
                    id="date"
                    class="in"
                    type="text"
                    placeholder="请选择"
                    readonly=""
                    v-model="pickerdata"
                />
            </div>
            <div class="arrow"></div>
            <div class="clear"></div>
        </div>
        <div
            class="list_height plist-txt qs-relative js-actionParent"
            @click="begintime = !begintime"
        >
            <div class="abAct js-showActionSheet"></div>
            <div class="pic"></div>
            <div class="tit font14">
                <span class="font_red_light">*</span> 面试时间
            </div>
            <div class="describe font13 qs-temp-time">
                <span class="f-aptime-txt">{{ time }}</span>
            </div>
            <div class="arrow"></div>
            <div class="clear"></div>
        </div>
        <div class="custom_row">
            <div class="list_height plist-txt notarrow">
                <div class="pic"></div>
                <div class="tit font14">
                    <span class="font_red_light">*</span> 面试地点
                </div>
                <div class="describe font13">
                    <input
                        type="text"
                        id="address"
                        value=""
                        v-model="Info.apply.address"
                    />
                </div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="split-block"></div>
        <div class="list_height plist-txt notarrow">
            <div class="pic"></div>
            <div class="tit font14">
                <span class="font_red_light">*</span> 联系人
            </div>
            <div class="describe font13">
                <input
                    type="text"
                    id="contact"
                    value=""
                    v-model="Info.apply.contact"
                />
            </div>
            <div class="arrow"></div>
            <div class="clear"></div>
        </div>
        <div class="list_height plist-txt notarrow">
            <div class="pic"></div>
            <div class="tit font14">
                <span class="font_red_light">*</span> 联系电话
            </div>
            <div class="describe font13">
                <input
                    type="text"
                    id="telephone"
                    value=""
                    v-model="Info.apply.telephone"
                />
            </div>
            <div class="arrow"></div>
            <div class="clear"></div>
        </div>
        <div class="custom_row">
            <div class="list_height plist-txt qs-relative notarrow">
                <div class="abAct J_note"></div>
                <div class="pic"></div>
                <div class="tit font14">
                    <span class="font_red_light wh">*</span> 备注
                </div>
                <div class="describe font13"></div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
            <div class="per-introduce">
                <textarea
                    placeholder="请输入面试邀请备注"
                    name="tpl_notes"
                    id="tpl_notes"
                    v-model="notes"
                ></textarea>
            </div>
        </div>

        <div class="j_newbutton" style="margin-top: 1rem">
            <div class="j_newbtn" @click="submit()">提交</div>
        </div>
        <!-- 更多 -->
        <van-action-sheet
            v-model="gengduoKey"
            :actions="gengduoactions"
            @select="gengduoSelect"
            cancel-text="取消"
            :duration="0.2"
        />

        <!-- 年月日选择 -->
        <van-popup
            v-model="beginKey"
            position="bottom"
            :style="{ height: '40%' }"
            @close="cascaderclose"
        >
            <van-datetime-picker
                v-model="begincurrentDate"
                type="date"
                title="选择年月"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="beginConfim"
                @cancel="cascaderclose"
                item-height="1.3rem"
                visible-item-count="10"
            />
        </van-popup>
        <!-- 时间选择 -->
        <van-popup
            v-model="begintime"
            position="bottom"
            :style="{ height: '40%' }"
            @close="cascaderclose"
        >
            <van-datetime-picker
                type="time"
                title="选择时间"
                :min-hour="7"
                :max-hour="24"
                @confirm="beginConfimtime"
                @cancel="cascaderclose"
                item-height="1.3rem"
                visible-item-count="10"
                :filter="filter"
            />
        </van-popup>
        <div class="zhanwei"></div>
    </div>
</template>

<script>
import { axiosGet, axiosPost } from '../../axios';
import { Toast } from 'vant';
export default {
    name: '',
    data() {
        return {
            gengduoKey: false,
            gengduoactions: [],

            Info: {},

            beginKey: false,
            begincurrentDate: new Date(),
            minDate: new Date(),
            maxDate: new Date(2050, 0, 0),
            begintime: false,

            pickerdata: '',
            time: '',
            notes: '',
            ap: 1,
        };
    },
    computed: {},
    mounted() {
        this.getInitInfo();
    },
    methods: {
        // 提交
        submit() {
            let params = {
                jobs_id: this.$route.query.jobs_id,
                resume_id: this.$route.query.resume_id,
                date: this.pickerdata,
                ap: this.ap,
                time: this.time.split(':')[0],
                address: this.Info.apply.address,
                contact: this.Info.apply.contact,
                telephone: this.Info.apply.telephone,
                notes: this.notes,
            };

            for (let i in params) {
                if (!params[i]) {
                    return Toast({
                        message: '请填写完整信息',
                        duration: 2000,
                    });
                }
            }

            axiosPost('/apis/company/jobs_interview_store', params, (res) => {
                Toast({
                    message: res.msg,
                    duration: 2000,
                });
                if (res.status != 1) {
                    return;
                }
                setTimeout(() => {
                    this.$router.go(-1);
                });
            });
        },
        // 过滤
        filter(type, options) {
            if (type === 'minute') {
                return options.filter((option) => option % 5 === 0);
            }
            if (type === 'hour') {
                return options.filter(
                    (option) =>
                        (option > 7 && option < 12) ||
                        (option > 13 && option < 18)
                );
            }
            return options;
        },
        // 关闭时间选择
        cascaderclose() {
            this.beginKey = false;
            this.begintime = false;
        },
        // 时间选择回调
        beginConfimtime(data) {
            this.begintime = false;

            this.time = data;
            if (parseInt(data.split(':')[0]) > 12) {
                this.ap = 2;
            }
        },
        // 日期选择
        beginConfim(val) {
            this.beginKey = false;
            const add0 = (m) => {
                return m < 10 ? '0' + m : m;
            };
            const time = new Date(val);
            const y = time.getFullYear();
            const m = time.getMonth() + 1;
            const r = time.getDate();
            this.pickerdata = y + '-' + add0(m) + '-' + add0(r);
        },
        // 职位选择
        gengduoSelect(data) {
            this.gengduoKey = false;
            this.Info.default_jobs.jobs_id = data.id;
            this.Info.default_jobs.jobs_name = data.name;
        },
        getInitInfo() {
            axiosGet(
                '/apis/company/jobs_interview_create',
                {
                    id: this.$route.query.id,
                },
                (res) => {
                    // console.log(res);
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    this.Info = res.data;

                    // 加工选择数据
                    let jobs = [];
                    for (let i in res.data.jobs) {
                        let el = res.data.jobs[i];
                        jobs.push({
                            name: el.jobs_name,
                            id: i,
                        });
                    }
                    this.gengduoactions = jobs;
                }
            );
        },
    },
};
</script>
<style lang="less" src="../../assets/css/jobCommon.less" scope></style>
<style lang="css" src="../../assets/css/van-action-sheet.css" scope></style>
<style lang="less" src="../../assets/css/timePicker.less" scope></style>
<style lang="less" scope>
.per-introduce {
    background: #ffffff;
    padding: 0.7467rem;
}
.per-introduce textarea {
    width: 100%;
    height: 7.4667rem;
    border: 0px;
}
</style>
